import React, { Component } from 'react';
import './index.css'

export default class Footer extends Component {
  
	// 全勾
	handleCheckAll = (event) => {
		this.props.checkAllTodo(event.target.checked)
	}
	// 清除已勾选的
	handleClearAllDone = () => {
		if (window.confirm("是否全部删除已完成的?")){
			this.props.clearAllDone()
		}
	}
	
	render() {
		const {todos} = this.props
		// 已完成的
		const doneCount = todos.reduce((pre,todo) => {return pre + (todo.done ? 1 : 0)}, 0)
		// 全部的
		const total = todos.length
		return (
				<div className="todo-footer">
					<label>
						<input type="checkbox" onChange={this.handleCheckAll} checked={doneCount === total && total !== 0 ? true : false} />
					</label>
					<span>
						<span>已完成{doneCount}</span> / 全部{total}
					</span>
					<button onClick={this.handleClearAllDone} className="btn btn-danger">清除已完成任务</button>
				</div>
			);
	}
}
